<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
      </view>
      <view class="title">学生档案</view>
      <view class="student-avatar2" @click="shareProfile">
        <uni-icons type="share" size="24" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 学生基本信息 -->
    <view class="student-info">
      <view class="avatar-container">
        <image :src="student.avatar" mode="aspectFill" class="avatar"></image>
        <view class="badge">{{ student.comprehensiveAbility }}</view>
      </view>
      <view class="student-details">
        <text class="student-name">{{ student.name }}</text>
        <view class="info-row">
          <uni-icons type="location" size="16" color="#fff"></uni-icons>
          <text class="student-school">{{ student.university }}</text>
        </view>
        <view class="info-row">
          <uni-icons type="education" size="16" color="#fff"></uni-icons>
          <text class="student-grade">{{ student.major }}</text>
        </view>
        <view class="info-row">
          <uni-icons type="calendar" size="16" color="#fff"></uni-icons>
          <text class="student-school">使用职途竞界时间：{{ student.experienceTime }}</text>
        </view>
      </view>
      <button class="follow-btn" :class="{ followed: isFollowed }" @click="followStudent">
        {{ followText }}
      </button>
    </view>

    <!-- 选项卡 -->
    <view class="tabs">
      <view class="tab active">信息</view>
      <view class="tab">数据</view>
      <view class="tab">能力值</view>
      <view class="tab">评价</view>
    </view>

    <!-- 综合能力展示 -->
    <view class="card ability-section">
      <view class="card-header">
        <text class="section-title">综合能力分析</text>
        <text class="more">详情 ></text>
      </view>

      <view class="comprehensive-ability">
        <view class="score-container">
          <text class="ability-title">综合能力</text>
          <text class="ability-score">{{ student.planCompletionRate }}</text>
        </view>

        <!-- 雷达图容器 -->
        <canvas canvas-id="radarChart" class="radar-chart"></canvas>
      </view>

      <!-- 各项能力值 -->
      <view class="ability-details">
        <view class="ability-item" v-for="(item, index) in abilityItems" :key="index">
          <view class="progress-container">
            <text class="ability-label">{{ item.label }}</text>
            <progress :percent="item.value" activeColor="#1296db" backgroundColor="#f0f0f0" stroke-width="6" />
          </view>
          <text class="ability-value" :style="{ color: item.color }">{{ item.value }}</text>
        </view>
      </view>
    </view>

    <!-- 推荐理由 -->
    <view class="card recommendation-section">
      <view class="card-header">
        <text class="section-title">推荐理由</text>
        <uni-icons type="star-filled" size="20" color="#FFD700"></uni-icons>
      </view>
      <text class="recommendation-reason">{{ student.recommendationReason }}</text>
    </view>

    <!-- 其他信息 -->
    <view class="card other-info">
      <view class="card-header">
        <text class="section-title">详细信息</text>
      </view>

      <view class="info-item">
        <view class="info-header">
          <uni-icons type="compose" size="18" color="#1296db"></uni-icons>
          <text class="info-label">惯用技能</text>
        </view>
        <view class="info-content">
          <view class="skill-tag" v-for="(skill, index) in student.skills" :key="index">
            {{ skill }}
          </view>
        </view>
      </view>

      <view class="info-item">
        <view class="info-header">
          <uni-icons type="medal" size="18" color="#f1c40f"></uni-icons>
          <text class="info-label">获奖情况</text>
        </view>
        <view class="info-content">
          <view class="award-tag" v-for="(award, index) in student.awards" :key="index">
            {{ award }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { fetchStudentProfile } from '@/api/api.js';

export default {
  data() {
    return {
      student: {
        id: '',
        name: '',
        gender: '',
        birthDate: '',
        phone: '',
        avatar: '',
        educationLevel: '',
        projectCount: '',
        workExperience: '',
        university: '',
        major: '',
        skills: [],
        awards: [],
        desiredPosition: '',
        expectedSalary: '',
        lastLogin: '',
        postsCount: '',
        videoLearningDuration: '',
        softwareUsageDuration: '',
        planCompletionRate: '',
        createdAt: '',
        updatedAt: '',
        rankingScore: '',
        activeScore: '',
        compositeScore: '',
        experienceTime: '1年',
        recommendationReason: '该学生具备良好的学习能力和实践经验，能够快速适应新环境并高效完成任务。',
        comprehensiveAbility: 95
      },
      abilityItems: [
        { label: '技能值', value: 85, color: '#1296db' },
        { label: '经验值', value: 78, color: '#f1c40f' },
        { label: '教育背景值', value: 92, color: '#2ecc71' },
        { label: '匹配度', value: 89, color: '#e74c3c' }
      ],
      isFollowed: false,
      followText: '关注' // 添加 followText 属性
    };
  },
  onLoad(options) {
    console.log(options); // 调试输出 options 对象
    const { id } = options;
    console.log(id);
    if (!id) {
      console.error('未接收到 id 参数');
      uni.showToast({
        title: '未获取到学生 ID',
        icon: 'none'
      });
      return;
    }
    this.fetchStudentData(id);
    // this.getTalentDetails(id); // 新增获取学生详情的方法
  },
  onReady() {
    this.drawRadarChart();
  },
  methods: {
    // 获取学生数据
    async fetchStudentData(id) {
      try {
        const response = await fetchStudentProfile(id);
        if (!response.data || typeof response.data !== 'object') {
          throw new Error('返回的数据格式不正确');
        }
        const data = response.data;
        console.log(data);
        Object.keys(data).forEach(key => {
          if (key === 'skills' || key === 'awards') {
            this.student[key] = data[key] ? JSON.parse(data[key]) : [];
          } else {
            this.student[key] = data[key];
          }
        });
      } catch (error) {
        console.error('获取学生数据失败:', error);
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        });
      }
    },
    // // 新增获取学生详情的方法
    // async getTalentDetails(id) {
    //   try {
    //     const response = await fetchTalentDetails(id);
    //     if (!response.data || typeof response.data !== 'object') {
    //       throw new Error('返回的数据格式不正确');
    //     }
    //     const data = response.data;
    //     console.log(data);
    //     Object.keys(data).forEach(key => {
    //       if (key === 'skills' || key === 'awards') {
    //         this.student[key] = data[key] ? JSON.parse(data[key]) : [];
    //       } else {
    //         this.student[key] = data[key];
    //       }
    //     });
    //   } catch (error) {
    //     console.error('获取学生详情失败:', error);
    //     uni.showToast({
    //       title: '获取学生详情失败',
    //       icon: 'none'
    //     });
    //   }
    // },
    // 绘制雷达图
    drawRadarChart() {
      const ctx = uni.createCanvasContext('radarChart', this);
      const centerX = 100;
      const centerY = 100;
      const radius = 80;

      // 绘制背景网格
      ctx.setStrokeStyle('#e0e0e0');
      ctx.setLineWidth(1);
      for (let i = 1; i <= 5; i++) {
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius * i / 5, 0, Math.PI * 2);
        ctx.stroke();
      }

      // 定义雷达图的数据点
      const points = [
        { angle: 0, value: this.student.planCompletionRate },
        { angle: Math.PI / 3, value: this.student.postsCount },
        { angle: Math.PI / 1.5, value: this.student.videoLearningDuration / 100 },
        { angle: Math.PI, value: this.student.softwareUsageDuration / 100 },
        { angle: Math.PI / 1.5 * 2, value: this.student.projectCount * 10 },
        { angle: Math.PI / 3 * 5, value: this.student.workExperience * 10 }
      ];

      // 设置填充颜色为半透明蓝色
      ctx.setFillStyle('rgba(18, 150, 219, 0.6)');

      // 绘制多边形路径
      ctx.beginPath();
      points.forEach((point, index) => {
        const x = centerX + Math.cos(point.angle) * (point.value / 100) * radius;
        const y = centerY + Math.sin(point.angle) * (point.value / 100) * radius;
        if (index === 0) {
          ctx.moveTo(x, y);
        } else {
          ctx.lineTo(x, y);
        }
      });
      ctx.closePath();
      ctx.fill();

      ctx.draw();
    },
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    // 分享学生档案
    shareProfile() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    // 关注/取消关注学生
    followStudent() {
      this.isFollowed = !this.isFollowed;
      this.followText = this.isFollowed ? '已关注' : '关注';
    }
  }
};
</script>

<style>
/* 全局样式 */
page {
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* 卡片样式 */
.card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin: 20rpx 30rpx;
  padding: 24rpx;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
  background: linear-gradient(135deg, #3A4861 0%, #2c3a52 100%);
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  letter-spacing: 1rpx;
}

/* 学生基本信息 */
.student-info {
  display: flex;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #3A4861 0%, #2c3a52 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.student-info::before {
  content: "";
  position: absolute;
  top: -100rpx;
  right: -100rpx;
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.avatar-container {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  margin-right: 30rpx;
  flex-shrink: 0;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
}

.badge {
  position: absolute;
  bottom: -10rpx;
  right: -10rpx;
  background: #1296db;
  color: white;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  border: 3rpx solid white;
}

.student-details {
  flex: 1;
  padding-right: 20rpx;
}

.student-name {
  font-size: 40rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  display: block;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 26rpx;
  opacity: 0.9;
}

.info-row .uni-icons {
  margin-right: 10rpx;
}

.follow-btn {
  background: linear-gradient(135deg, #1296db 0%, #0d7bb8 100%);
  color: white;
  border: none;
  padding: 0 30rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  height: 70rpx;
  line-height: 70rpx;
  box-shadow: 0 4rpx 12rpx rgba(18, 150, 219, 0.3);
  transition: all 0.3s;
  align-self: center;
}

.follow-btn.followed {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  box-shadow: 0 4rpx 12rpx rgba(46, 204, 113, 0.3);
}

/* 选项卡 */
.tabs {
  display: flex;
  background-color: white;
  border-radius: 12rpx;
  margin: 20rpx 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  padding: 10rpx;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 30rpx;
  color: #666;
  position: relative;
  transition: all 0.3s;
}

.tab.active {
  color: #1296db;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: 5rpx;
  left: 25%;
  width: 50%;
  height: 6rpx;
  background: #1296db;
  border-radius: 3rpx;
}

/* 综合能力展示 */
.ability-section {
  padding-bottom: 30rpx;
}

.comprehensive-ability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.score-container {
  flex: 1;
}

.ability-title {
  font-size: 32rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.ability-score {
  font-size: 60rpx;
  font-weight: bold;
  color: #1296db;
  display: block;
}

.radar-chart {
  width: 250rpx;
  height: 250rpx;
  margin-left: 20rpx;
}

.ability-details {
  margin-top: 20rpx;
}

.ability-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
}

.progress-container {
  flex: 1;
  padding-right: 20rpx;
}

.ability-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.ability-value {
  font-size: 36rpx;
  font-weight: bold;
  min-width: 80rpx;
  text-align: right;
}

/* 推荐理由 */
.recommendation-section {
  padding-bottom: 30rpx;
}

.recommendation-reason {
  font-size: 28rpx;
  line-height: 1.6;
  color: #555;
}

/* 其他信息 */
.other-info {
  margin-bottom: 40rpx;
}

.info-item {
  margin-bottom: 30rpx;
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-header .uni-icons {
  margin-right: 10rpx;
}

.info-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.info-content {
  display: flex;
  flex-wrap: wrap;
}

.skill-tag,
.award-tag {
  padding: 12rpx 24rpx;
  border-radius: 40rpx;
  margin-right: 15rpx;
  margin-bottom: 15rpx;
  font-size: 26rpx;
}

.skill-tag {
  background: rgba(18, 150, 219, 0.1);
  color: #1296db;
  border: 1rpx solid rgba(18, 150, 219, 0.3);
}

.award-tag {
  background: rgba(241, 196, 15, 0.1);
  color: #f1c40f;
  border: 1rpx solid rgba(241, 196, 15, 0.3);
}
</style>